<template>
	<view class="main">
		<view class="second" v-if="data[1]">
			<u-image :src="data[1].user.avatar" shape="circle" width="160rpx" height="160rpx"></u-image>
			<text class="user">{{data[1].user.name}}</text>
			<view class="section">
				<p class="left-triangle"></p>
				<p class="center">第2名</p>
				<p class="right-triangle"></p>
			</view>
		</view>
		<view class="first" v-if="data[0]">
			<u-image :src="data[0].user.avatar" shape="circle" width="160rpx" height="160rpx"></u-image>
			<text class="user">{{data[0].user.name}}</text>
			<view class="section">
				<p class="left-triangle"></p>
				<p class="center">第1名</p>
				<p class="right-triangle"></p>
			</view>
		</view>
		<view class="third" v-if="data[2]">
			<u-image :src="data[2].user.avatar" shape="circle" width="160rpx" height="160rpx"></u-image>
			<text class="user">{{data[2].user.name}}</text>
			<view class="section">
				<p class="left-triangle"></p>
				<p class="center">第3名</p>
				<p class="right-triangle"></p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: Array,
		},
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {

		}
	}
</script>

<style scoped lang="scss">
	.main{
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}
	.user {
		font-size: 32rpx;
		color: rgba(24, 144, 255, 1);
	}
	.second {
		position: relative;
		width: 256rpx;
		height: 300rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: column;
		box-shadow: 0rpx 0rpx 10rpx #1f92fb;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.section {
			width: 166rpx;
			position: absolute;
			display: flex;
			top: -20rpx;
			left: 0;
			right: 0;
			margin: auto;

			.left-triangle {
				width: 0;
				height: 0;
				border-right: 20rpx solid #1f92fb;
				border-top: 20rpx solid transparent;
				border-bottom: 20rpx solid transparent;
			}

			.center {
				width: 126rpx;
				height: 40rpx;
				background: #1f92fb;
				color: #FFFFFF;
				font-size: 34rpx;
				text-align: center;
				line-height: 40rpx;
			}

			.right-triangle {
				width: 0;
				height: 0;
				border-left: 20rpx solid #1f92fb;
				border-top: 20rpx solid transparent;
				border-bottom: 20rpx solid transparent;
			}
		}
	}
	
	.first{
		position: relative;
		width: 280rpx;
		height: 340rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: column;
		box-shadow: 0rpx 0rpx 10rpx #feae22;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		z-index: 9999;
		background-color: #FFFFFF;
		margin-left: -24rpx;
		margin-right: -16rpx;
		
		.section {
			width: 166rpx;
			position: absolute;
			display: flex;
			top: -20rpx;
			left: 0;
			right: 0;
			margin: auto;
		
			.left-triangle {
				width: 0;
				height: 0;
				border-right: 20rpx solid #feae22;
				border-top: 20rpx solid transparent;
				border-bottom: 20rpx solid transparent;
			}
		
			.center {
				width: 126rpx;
				height: 40rpx;
				background: #feae22;
				color: #FFFFFF;
				font-size: 34rpx;
				text-align: center;
				line-height: 40rpx;
			}
		
			.right-triangle {
				width: 0;
				height: 0;
				border-left: 20rpx solid #feae22;
				border-top: 20rpx solid transparent;
				border-bottom: 20rpx solid transparent;
			}
		}
	}
	
	.third{
		position: relative;
		width: 236rpx;
		height: 280rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: column;
		box-shadow: 0rpx 0rpx 10rpx #ffd60d;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		
		.section {
			width: 166rpx;
			position: absolute;
			display: flex;
			top: -20rpx;
			left: 0;
			right: 0;
			margin: auto;
		
			.left-triangle {
				width: 0;
				height: 0;
				border-right: 20rpx solid #ffd60d;
				border-top: 20rpx solid transparent;
				border-bottom: 20rpx solid transparent;
			}
		
			.center {
				width: 126rpx;
				height: 40rpx;
				background: #ffd60d;
				color: #FFFFFF;
				font-size: 34rpx;
				text-align: center;
				line-height: 40rpx;
			}
		
			.right-triangle {
				width: 0;
				height: 0;
				border-left: 20rpx solid #ffd60d;
				border-top: 20rpx solid transparent;
				border-bottom: 20rpx solid transparent;
			}
		}
	}
</style>
